<template>
  <div class="card-container">
    <div class="card-item" v-auth="'Receive_kpi:yx_Receive_kpi:ReceiveSumOfKpi'" @click="gotoReceiveKpi">
      <div class="text">{{cardList[0].title}}</div>
      <div class="count">{{cardList[0].count}}</div>
    </div>
    <div class="card-item" v-auth="'Report_kpi:yx_Report_kpi:ReportSumOfKpi'" @click="gotoReportKpi">
      <div class="text">{{cardList[1].title}}</div>
      <div class="count">{{cardList[1].count}}</div>
    </div>
    <div class="card-item" v-auth="'Approval_kpi:yx_Approval_kpi:ApprovalSumOfKpi'" @click="gotoApprovalKpi">
      <div class="text">{{cardList[2].title}}</div>
      <div class="count">{{cardList[2].count}}</div>
    </div>
    <div class="card-item" v-auth="'kpi:yx_kpi:KpiSum'" @click="gotoKpiList">
      <div class="text">{{cardList[3].title}}</div>
      <div class="count">{{cardList[3].count}}</div>
    </div>
    <div class="card-item" v-auth="'annualkeywork:yx_annual_key_work:AnnualKeyWorkSum'" @click="gotoAnnualKeyWorkList">
      <div class="text">{{cardList[4].title}}</div>
      <div class="count">{{cardList[4].count}}</div>
    </div>
    <div class="card-item" v-auth="'annualkeywork:yx_annual_key_work:ReportSumOfKeyWork'" @click="gotoReportAnnualKeyWorkList">
      <div class="text">{{cardList[5].title}}</div>
      <div class="count">{{cardList[5].count}}</div>
    </div>
    <div class="card-item" v-auth="'annualkeywork:yx_annual_key_work:ApprovalSumOfKeyWork'" @click="gotoApprovalAnnualKeyWorkList">
      <div class="text">{{cardList[6].title}}</div>
      <div class="count">{{cardList[6].count}}</div>
    </div>
    <div class="card-item" v-auth="'annualkeywork:yx_annual_key_work:KeyWorkSum'" @click="gotoKeyWorkList">
      <div class="text">{{cardList[7].title}}</div>
      <div class="count">{{cardList[7].count}}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue';
import {KanBanApi} from "@/views/ToDoKanBan/ToDoKanBan.api";
import { useRouter } from 'vue-router';

const router = useRouter();
const gotoReceiveKpi = () => {
  router.push({path: '/tobedone/tobedoneList'});
}
const gotoReportKpi = () => {
  router.push({path: '/report_kpi/reportKpiList'});
}
const gotoApprovalKpi = () => {
  router.push({path: '/approval_kpi/approvalKpiList'});
}
const gotoKpiList = () => {
  router.push({path: '/kpi_taskstatus/KpiTaskStatusList'});}
const gotoAnnualKeyWorkList=()=>{
  router.push({path: '/tobedoneAnnualKeyWork/TobedoneAnnualKeyWorkList'});
}
const gotoReportAnnualKeyWorkList = () => {
  router.push({path: '/ReportAnnualKeyWorkList/ReportAnnualKeyWorkList'});
}
const gotoApprovalAnnualKeyWorkList = () => {
  router.push({path: '/ApprovalAnnualKeyWorkList/ApprovalAnnualKeyWorkList'});}
const gotoKeyWorkList=()=>{
  router.push({path: '/annualkeyworkList/annualkeyworkList'});
}
const cardList=ref([
  {title:"接收年度关键指标",count:null},
  {title:"汇报年度关键指标",count:null},
  {title:"审批年度关键指标",count:null},
  {title:"年度关键指标列表", count:null},
  {title:"接收年度重点工作",count:null},
  {title:"汇报年度重点工作",count:null},
  {title:"审批年度重点工作", count:null},
  {title:"年度重点工作列表",count:null}
]);

// 页面加载时获取接收年度关键指标记录的总数
onMounted(async () => {
  try {
    const responseOfReceiveSumOfKpi = await KanBanApi.ReceiveSumOfKpi();
    const responseOfReportSumOfKpi = await KanBanApi.ReportSumOfKpi();
    const responseOfApprovalSumOfKpi = await KanBanApi.ApprovalSumOfKpi();
    const responseKpiSum= await KanBanApi.KpiSum();
    const responseTobedoneAnnualKeyWorkSum= await KanBanApi.TobedoneAnnualKeyWorkSum();
    const responseOfReportSumOfKeyWork= await KanBanApi.ReportSumOfKeyWork();
    const responseOfApprovalSumOfKeyWork= await KanBanApi.ApprovalSumOfKeyWork();
    const responseKeyWorkSum= await KanBanApi.KeyWorkSum();
      // 如果返回的直接就是数字
      cardList.value[0].count = responseOfReceiveSumOfKpi;
      cardList.value[1].count = responseOfReportSumOfKpi;
      cardList.value[2].count = responseOfApprovalSumOfKpi;
      cardList.value[3].count = responseKpiSum;
      cardList.value[4].count = responseTobedoneAnnualKeyWorkSum;
    cardList.value[5].count = responseOfReportSumOfKeyWork;
    cardList.value[6].count = responseOfApprovalSumOfKeyWork;
    cardList.value[7].count = responseKeyWorkSum;
  } catch (error) {
    console.error('获取指标数量失败:', error);
  }
});
</script>
<style scoped lang="less">
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}
.card-item {
  width: calc(25% - 20px); /* 每行4个，可根据需求调整 */
  background-color: #0b3b9c;
  border-radius: 8px;
  color: #fff;
  text-align: center;
  padding: 15px;
  box-sizing: border-box;
}
.text {
  margin-bottom: 6px;
}

.count {
  font-size: 14px;
}
</style>
